<template>
  <DistributorLayout>
    <div class="account-page">
      <div class="account-page__header">
        <h1 class="account-page__title">账户设置</h1>
        <p class="account-page__subtitle">管理您的个人信息和账户设置</p>
      </div>

      <!-- 标签页切换器 -->
      <div class="account-page__tabs">
        <div v-for="tab in tabs" :key="tab.id" class="account-page__tab" :class="{ 'active': activeTab === tab.id }"
          @click="activeTab = tab.id">
          <i :class="['fas', tab.icon]"></i>
          <span>{{ tab.name }}</span>
        </div>
      </div>

      <!-- 标签页内容区域 -->
      <div class="account-page__content">
        <ProfileSettings v-if="activeTab === 'profile'" />
        <!-- <PaymentSettings v-else-if="activeTab === 'payment'" />
        <DefaultSettings v-else-if="activeTab === 'default'" /> -->
        <AddressTable v-else-if="activeTab === 'address'" />
      </div>
    </div>
  </DistributorLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DistributorLayout from './DistributorLayout.vue'
import ProfileSettings from '@/components/distributor/account/ProfileSettings.vue'
import PaymentSettings from '@/components/distributor/account/PaymentSettings.vue'
import DefaultSettings from '@/components/distributor/account/DefaultSettings.vue'
import AddressTable from '@/components/distributor/account/AddressTable.vue'

// 标签页定义
const tabs = [
  { id: 'profile', name: '个人资料', icon: 'fa-user' },
  // { id: 'payment', name: '支付信息', icon: 'fa-wallet' },
  // { id: 'default', name: '默认设置', icon: 'fa-cog' },
  { id: 'address', name: '地址设置', icon: 'fa-cog' },
]

// 当前激活的标签页
const activeTab = ref('profile')
</script>

<style scoped lang="scss">
.account-page {
  &__header {
    margin-bottom: 24px;
  }

  &__title {
    font-size: 24px;
    font-weight: 700;
    color: #2F3542;
    margin: 0 0 8px 0;
  }

  &__subtitle {
    font-size: 14px;
    color: #6C757D;
    margin: 0;
  }

  &__tabs {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 24px;
    overflow-x: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__tab {
    padding: 12px 20px;
    cursor: pointer;
    color: #6C757D;
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;

    i {
      margin-right: 8px;
    }

    &:hover {
      color: #FF4757;
    }

    &.active {
      color: #FF4757;
      border-bottom-color: #FF4757;
    }
  }

  &__content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
}

@media (max-width: 576px) {
  .account-page {
    &__tab {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
}
</style>
